<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title>友邻</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="../css/pages/neighbor.css" />
</head>

<body>
	<div id="app" class="content">
		<!--
			作者：1169774483@qq.com
			时间：2018-08-20
			描述：加载遮罩层
		-->
		<div class="loading-warpper" id="loading">
			<!-- <div class="loading">
				<div class="item1"></div>
				<div class="item2"></div>
			</div> -->
		</div>
		<div class="header">友邻社区</div>
		<!--
			作者：1169774483@qq.com
			时间：2018-08-20
			描述：推荐模块 / 后续可以点击跳转到对应的 详情页
		-->
		<div class="recommend">
			<div class="title">
				<img class="icon" src="../images/discover/huo.png" >
				为你推荐</div>
			<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<div class="mui-scroll">
					<div class="img-wapper margin-top15 ">
						<div class="item-item" v-for="item in recommend" @click="recommendClick(item)">
							<img class="item-image" :src="item.path" />	
							<div class="item-desc">
								<div class="item-title">
									<span style="color: #DD524D;" v-if="item.type==1">活动#</span>
									<span style="color: #fcc747;" v-else>商品#</span>
									<span v-text="item.title"></span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--
			作者：1169774483@qq.com
			时间：2018-08-20
			描述：分类模块 / 可以点击进去对应的列表页
		-->
		<div class="module">
			<div class="title"> 
				<img class="icon" src="../images/neighbor/fenlei.png" >
				社区分类</div>
			<div class="module-list">
				<div class="item" v-for="item in moduleList" @click="moduleClick(item)">
					<img class="item-image" :src="item.imgSrc">
					<div class="item-title" v-text="item.title"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="bottom-bow"></div>
	<script src="../js/Width.js"></script>
	<script src="../js/mui.min.js"></script>
	<script src="../js/vue.js"></script>
	<script src="../js/Util.js"></script>
	<script src="../data-js/discover.js"></script>
	<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
	<script type="text/javascript">
		mui.init()
		mui.plusReady(function () {
			if (!mui.os.android) {
				FastClick.attach(document.body);
			}
			// Util.StatusbarHeight('header')
			mui('.mui-scroll-wrapper').scroll({
				deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
			});
			var self = plus.webview.currentWebview();
			self.setPullToRefresh({
				support: true,
				height: '50px',
				range: '200px',
				contentdown: {
					caption: '下拉可以刷新'
				},
				contentover: {
					caption: '释放立即刷新'
				},
				contentrefresh: {
					caption: '正在刷新...'
				}
			}, function() {
				GetRecommend()
				self.endPullToRefresh();
			});
			
			GetRecommend()
		})

		function GetRecommend() {
			mui.post(Util.HTTP + 'api/Users/GetRecommend', {
				neiID: Util.getState('hosing').neiID || ''
			}, function (res) {
				if (res.code == 1001) {
					app.recommend = res.data;
					document.getElementById('loading').style.display = 'none';
				} else {
					mui.toast(res.message)
				}
			})
		}

		var app = new Vue({
			el: '#app',
			data: {
				myUrl: '',
				loading: true,
				recommend: [],
				moduleList: [{
					title: '小区活动',
					imgSrc: '../images/neighbor/huodong.png',
					Url: 'neighbor/activity/list.html',
					myUrl: 'neighbor/activity/my.html'
				}, {
					title: '小区拼车',
					imgSrc: '../images/neighbor/pinche.png',
					Url: 'neighbor/carSharing/list.html'
				}, {
					title: '二手之家',
					imgSrc: '../images/neighbor/ershou.png',
					Url: 'neighbor/secondHand/list.html',
					myUrl: 'neighbor/secondHand/my.html'
				}, {
					title: '业主分享',
					imgSrc: '../images/neighbor/fenxiang.png',
					Url: 'neighbor/share/list.html'
				}]
			},
			mounted: function () {
				this.loading = false
			},
			methods: {
				moduleClick: function (item) {
					var that = this;
					this.myUrl = item.myUrl;
					if (item.Url) {
						mui.openWindow({
							url: item.Url,
							id: item.Url,
							waiting: {
								autoShow: false
							}
						})
					}
				},
				recommendClick: function (item) {
					if(item.type==1){
						mui.openWindow({
							url: 'neighbor/activity/details.html',
							id: 'neighbor/activity/details.html',
							styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
								titleNView: { // 窗口的标题栏控件
									titleText: "活动详情", // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题         // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
									titleSize: "17px", // 字体大小,默认17px
									backgroundColor: "#ffffff", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
									autoBackButton: true
								}
							},
							extras: {
								actID: item.Id,
							},
						})
					}else{
						mui.openWindow({
							url: 'neighbor/secondHand/details.html',
							id: 'neighbor/secondHand/details.html',
							styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
								titleNView: { // 窗口的标题栏控件
									titleText: "宝贝详情", // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题         // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
									titleColor: "#414141",
									titleSize: "17px", // 字体大小,默认17px
									backgroundColor: "#ffffff", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
									autoBackButton: true
								}
							},
							extras: {
								detailID: item.Id,
							},
							waiting: {
								autoShow: false
							}
						})
					}
				}
			},
		})
	</script>
</body>

</html>
